<template>
    <div class="screen-container">
      <header class="screen-header">
          <div>
              <img src="../../assets/img/header_border_dark_l.png" alt="">
          </div>
          <span class="logo">
          </span>
          <span class="title">净儒小坛后台管理系统</span>
          <div class="title-right">
              <span id="datetime"></span>
          </div>
      </header>
      <div class="screen-body">
          <section class="screen-left">
              <div class="left-top">
                  <!--  -->
                  <Trendt ref="trend"></Trendt>
              </div>
              <div class="left-bottom">
                  <!--  -->
                  <Radar></Radar>
              </div>
          </section>
          <section class="screen-middle">
              <div class="middle-top">
                  <!--  -->
                  <Map></Map>
              </div>
              <div class="middle-bottom">
                  <!--  -->
                  <Seller></Seller>
              </div>
          </section>
          <section class="screen-right" >
              <div class="right-top">
                  <!--  -->
                  <Trend></Trend>
              </div>
              <div class="right-bottom">
                  <!--  -->
                  <Hot></Hot>
              </div>
          </section>
      </div>
    </div>
  </template>

<script>
import Schart from 'vue-schart';
import Hot from './echarts/Hot.vue'
import Radar from './echarts/Radar.vue'
import Map from './echarts/Map.vue';
import Seller from './echarts/Seller.vue';
import Trend from './echarts/Trend.vue'
import Trendt from './echarts/Trendt.vue'

function fun(){
  var date=new Date();
  document.getElementById("datetime").innerHTML=(1900+date.getYear())+"-"+(date.getMonth()+1)+"-"+(date.getDay()+7)+"-"+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds()
}
setInterval(fun,1000)

export default {
    name: 'basecharts',
    components: {
        Schart , 
        Hot , 
        Map , 
        Seller , 
        Radar , 
        Trend , 
        Trendt
    },
    data() {
        return {
            fullScreenStatus: {
                hot: false,
                map: false,
                seller: false,
                trend: false,
                worldmap: false,
                trends: false
            }
        }
    },
    methods: {
        changeSize (chartName) {
            this.fullScreenStatus[chartName] = !this.fullScreenStatus[chartName]
            // this.$refs[chartName].screenAdapter()
            this.$nextTick(() => {
                this.$refs[chartName].screenAdapter()
            })
        },
        handleChangeTheme () {
            this.$store.commit('changeTheme')
        }
    },
}
</script>

<style lang="less" scoped>

.screen-container {
  width: 100%;
  height: 100%;
  padding: 0 20px;
  background-color: #161522;
  color: #fff;
  box-sizing: border-box;
}
.screen-header {
  width: 100%;
  height: 64px;
  font-size: 20px;
  position: relative;
  > div {
      img {
        width: 100%;
      }
    }
  .title {
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 20px;
    transform: translate(-50%, -50%);
  }
  .title-right {
    display: flex;
    align-items: center;
    position:absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-80%);
  }
  #datetime {
    font-size: 15px;
    margin-left: 10px;
  }
  .logo {
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-80%);
    img {
      height: 35px;
      width: 50px;
    }
  }
}
.screen-body {
  width: 100%;
  height: 100%;
  display: flex;
  margin-top: 10px;
  .screen-left {
    height: 100%;
    width: 27.6%;
    #left-top {
      height: 46%;
      position: relative;
    }
    #left-bottom {
      height: 38%;
      margin-top: 25px;
      position: relative;
    }
  }
  .screen-middle {
    height: 100%;
    width: 41.5%;
    margin-left: 1.6%;
    margin-right: 1.6%;
    #middle-top {
      width: 100%;
      height: 56%;
      position: relative;
    }
    #middle-bottom {
      margin-top: 25px;
      width: 100%;
      height: 28%;
      position: relative;
    }
  }
  .screen-right {
    height: 100%;
    width: 27.6%;
    #right-top {
      height: 46%;
      position: relative;
    }
    #right-bottom {
      height: 38%;
      margin-top: 25px;
      position: relative;
    }
  }
}
// .resize {
//   position: absolute;
//   right: 20px;
//   top: 20px;
//   cursor: pointer;
// }
</style>